<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令v-model的参数</title>
        <style>
            .wrapper { border: 1px solid blue; }
            .full-name { border: 1px solid gray; margin: 10px; }
        </style>
    </head>
    <div>

        <h3>指令 `v-model` 的参数 / 多个 `v-model` 绑定</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const FullName = {
                props: [ 'firstName', 'lastName' ],
                emits: [ 'update:firstName', 'update:lastName' ],
                template: `<div class="full-name">
                              <input type="text" :value="firstName" @input="input1" placeholder="名">
                              <input type="text" :value="lastName" @input="input2" placeholder="姓">
                           </div>`,
                methods: {
                    input1(evt){
                        this.$emit('update:firstName', evt.target.value);
                    },
                    input2(evt){
                        this.$emit('update:lastName', evt.target.value);
                    }
                }
            }

            const App = {
                components: {
                    FullName
                },
                template: `<div class="wrapper">
                                <FullName v-model:first-name="name" 
                                          v-model:last-name="surname">
                                </FullName>
                                <!--以上使用方式可以展开为:-->
                                <FullName :first-name="name"
                                          @update:first-name="newValue => this.name = newValue"
                                          :last-name="surname"
                                          @update:last-name="value => this.surname = value">
                                </FullName>
                                <FullName :first-name="name"
                                          @update:firstName="newValue => name = newValue"
                                          :last-name="surname"
                                          @update:lastName="value => surname = value">
                                </FullName>
                                <hr>
                                <p>{{fullName}}</p>
                           </div>`,
                data() {
                    return {
                        surname: '陈',
                        name: '玄奘'
                    }
                },
                computed: {
                    fullName() {
                        return `${this.surname}${this.name}`;
                    }
                }
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>